/* Entfernt Standardabstände und -einzüge des Browsers und legt die Grundschriftart fest */
body {
  margin: 0; /* Kein äußerer Abstand (Margin) für die Seite */
  padding: 0; /* Kein innerer Abstand (Padding) für die Seite */
  font-family: Arial, sans-serif; /* Schriftart für die gesamte Seite */
  background: url('images/background.webp') no-repeat center center fixed; /* Hintergrundbild, das sich nicht bewegt */
  background-size: cover; /* Passt das Hintergrundbild so an, dass es den Bildschirm vollständig ausfüllt */
}

/* Stil für den Container, der das Login-Formular umgibt */
.login-container {
  background: rgba(255, 255, 255, 0.8); /* Halbtransparenter weißer Hintergrund für Lesbarkeit */
  padding: 20px; /* Innerer Abstand innerhalb des Containers */
  border-radius: 10px; /* Abgerundete Ecken */
  max-width: 400px; /* Maximale Breite des Containers */
  margin: 100px auto; /* Zentriert den Container vertikal und horizontal */
  text-align: center; /* Zentriert den Text im Container */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Leichter Schatteneffekt unter dem Container */
}

/* Stil für die Eingabefelder im Formular */
input {
  display: block; /* Eingabefelder nehmen die gesamte Breite des Containers ein */
  width: 100%; /* Breite von 100% des übergeordneten Containers */
  padding: 10px; /* Innerer Abstand innerhalb der Eingabefelder */
  margin: 10px 0; /* Äußerer Abstand oben und unten zwischen den Feldern */
  border: 1px solid #ccc; /* Hellgraue Umrandung */
  border-radius: 5px; /* Abgerundete Ecken für die Eingabefelder */
}

/* Stil für die Schaltflächen */
button {
  width: 100%; /* Schaltfläche nimmt die gesamte Breite des Containers ein */
  padding: 10px; /* Innerer Abstand innerhalb der Schaltfläche */
  background-color: #007BFF; /* Blau als Hintergrundfarbe */
  color: white; /* Weißer Text auf der Schaltfläche */
  border: none; /* Keine Umrandung */
  border-radius: 5px; /* Abgerundete Ecken */
  font-size: 16px; /* Schriftgröße */
  cursor: pointer; /* Mauszeiger ändert sich zu einer Hand (zeigt Klickbarkeit) */
}

/* Stil für die Schaltflächen im Hover-Zustand (wenn die Maus darüber schwebt) */
button:hover {
  background-color: #0056b3; /* Dunkleres Blau bei Hover */
}

/* Medienabfrage für kleinere Bildschirme */
@media (max-width: 768px) {
  .login-container {
    margin: 50px auto; /* Reduziert den vertikalen Abstand für kleinere Bildschirme */
    width: 90%; /* Der Container nimmt 90% der Bildschirmbreite ein */
  }
}